<template>
    <div>
        <h1>计数器</h1>
        <!-- <h2>{{$store.state.num}}</h2> -->
        <h2>{{count}}----->{{dn}}</h2>
         <button @click="incrementState">state.num++</button>
         <button @click="incAsync">async++</button>
        <h2>{{num}}</h2>
        <button @click="num++">++</button>
    </div>
</template>

<script>
/* 
    在vuex中提供了辅助函数，可以使用辅助函数将store仓库中的成员映射成组件内的成员
    一、使用的步骤
    1、导入辅助函数
    import {mapState} from 'vuex'
    2、在组件的计算属性，通过扩展运算符将其映射出来
     computed:{
        ...mapState(["num"])
    }
    3、在template中使用插值或者指令的方式直接显示
    二、为mapState取别名的语法
    ...mapState({新名称：仓库中state中的名称})
    三、mutations辅助函数的使用的步骤
    1、导入
    import {mapMutations} from 'vuex'
    2、在methods选项中，通过对mapMutations()方法的扩展来完成对store仓库中mutations相关方法的映射
    methods:{
        ... ...mapMutations(['INCREMENT_NUM']),
    }
    3、使用
    四、actions辅助函数的使用步骤
    1、导入
    import {mapActions} from 'vuex'
    2、在methods选项中，通过对mapAcctions()方法的苦熬站来完成对store仓库中的actions相关方法的映射
    五、导入
    1、import {mapGetters} from 'vuex'
    2、在computed中通过对mapGetters()的映射来完成

    六、总结
    1、辅助函数是组件中访问store仓库中相关成员的一种方式
    2、mapState,mapGetters是在computed中映射的，mapMutations和mapActions是在methods中映射的
    3、如果仓库中映射的名称和本组件中的数据名称冲突，可以使用{新名称:仓库中的成员的名称}方式来取新名称


*/
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    data(){
        return{
            num:0
        }
    },
    computed:{
        //...mapState(["num"])
        ...mapState({'count':'num'}),
        ...mapGetters({"dn":"doubleNum"})
    },
    methods:{
        ...mapMutations({"ic":"INCREMENT_NUM"}),
        ...mapActions({"icAsync":"incrementAsync"}),
        incrementState(){
            this.ic(3)
        },
        incAsync(){
            this.icAsync(5)
        }
    }
}
</script>

<style>

</style>